<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>商品类目</title>
	<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
	<script th:src="@{/js/treeTable.js}" type="text/javascript"></script>
	<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body>

<div class="layui-panel" style="padding: 8px;">

	<fieldset class="layui-elem-field layui-border-blue">
		<legend>搜索信息</legend>
		<form class="layui-form layui-form-pane" style="margin: 20px;">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">名称</label>
					<div class="layui-input-inline">
						<input class="layui-input" type="text" name="name" autocomplete="off" />
					</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-inline">
						<a class="layui-btn layui-btn-primary" lay-submit="" lay-filter="searchBtn">
							<i class="layui-icon layui-icon-search"></i>
							搜索
						</a>
					</div>
				</div>
			</div>
		</form>
	</fieldset>
	<div>
		<table id="catTable" lay-filter="catTable"></table>
	</div>
</div>
<script id="tool" type="text/html">

	<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>

</script>
<script id="tableBar" type="text/html">
	<a class="layui-btn layui-btn-normal layui-btn-md" lay-event="add">
		<i class="layui-icon layui-icon-add-1"></i>
		新增
	</a>
	<!--<a class="layui-btn layui-btn-danger layui-btn-md" lay-event="delete">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </a>-->
</script>
<script id="switchState" type="text/html">
	<input type="checkbox" name="state" value="{{d.state}}"
		   lay-skin="switch" lay-text="是|否" lay-filter="checkstate" {{d.state==0?"checked":""}} />
</script>
<!--<script id="photo" type="text/html">
	{{# if(d.isUpdate==0){ }}
	<img src="/file/fc/showImg/{{d.photoPath}}" style="width: 30px;height: 60px;">
	{{# }}}
</script>-->
<script>


   var $;
	layui.use(['table','form','layer','treeTable','jquery'],function(){
		var table = layui.table,form = layui.form,
				layer = layui.layer,
		    treeTable = layui.treeTable;
		$ = layui.jquery;


        //加载表格
		var trt = function() {
			treeTable.render({
				elem: '#catTable',
				height: 'full-160',
				toolbar: '#tableBar',
				tree: {
					iconIndex: 1,//图标列的下标值
					isPidData: true,//是否为树形
					idName: 'id',//id唯一值的列属性名
					pidName: 'pid',//父id值的列属性名
					openName: 'open',//是否默认打开

				},
				page: true,
				url: '/ic/find',
				cols: [
					[
						{type: 'checkbox', fixed: 'left'},
						{field: 'id', title: '类目Id', width: 150},
						{field: 'name', title: '类目名称', width: 150},
						{field: 'iconPath', title: '类目图标', width: 150},
						{field: 'photoPath', title: '类目图片', width: 180},
						{field: 'keyWord', title: '关键字'},
						{field: 'introduction', title: '简介', width: 250},
						{field: 'grade', title: '级别', width: 250},
						{fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#tool'},
					]
				]
			})
		}
		trt();
		var active={
			dialog:function (title,id){
				var b = false;
				top.layer.open({
					type:2,
					title:title,
					content:'/page/system/itemCatAdd?id='+id,
					area:['700px','650px'],
					btn:['确认保存','取消关闭'],
					btn1:function (i,o) {
						b = true;
						o.find('iframe')[0].contentWindow.btnSubmit();
					},
					end:function () {
						if(b) trt();
					}
				})
			},
			delete:function (id){
			$.ajax({
				type:'post',
				url:'/ic/delete',
				data:{
					id:id
				},
				dataType:'json',
				success:function (result){
					layer.msg(result.msg)
					if (result.is){
						trt();
					}

				}
			})
		},
			edit:function (title,id) {
				var b = false;
				top.layer.open({
					type:2,
					title:title,
					content:'/page/itemCatEdit/'+id,
					area:['700px','650px'],
					btn:['确认保存','取消关闭'],
					btn1:function (i,o) {
						b = true;
						o.find('iframe')[0].contentWindow.btnSubmit();
					},
					end:function () {
						if(b) trt();
					}
				})
			}
		}

		//监听搜索按钮
		form.on('submit(searchBtn)',function(data){
			var dataForm = data.field;
			console.log(dataForm);
		})

		treeTable.on('toolbar(catTable)',function (data){
			var event = data.event;
			if("add" == event){
				active.dialog('新增类目','');
			}
		})
		treeTable.on('tool(catTable)',function (obj){
			var event = obj.event;
			var data = obj.data;
			if('edit' == event){
				active.edit('编辑类目',data.id);
			}else if('delete' == event){
				active.delete(data.id);
			}
		})

	});


</script>
</body>
</html>
